import React from "react";
import ReactDOM from 'react-dom'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import "antd/dist/antd.css"
import RouteConfig from "./utils/routeConfig";

import "./global.css"

import Home from "./pages/home/home";
import MyLayout from "./pages/layout/layout";
import UserIndex from "./pages/user/userIndex/userIndex";
import UserManage from "./pages/user/userManage/userManage";
import UserDetail from "./pages/user/userManage/userDetail/userDetail";
import Login from "./pages/login/login";
import App from "./App";

const MyRoutes: React.FC = () => {

  return <BrowserRouter>
    <Routes>

      <Route path="/" element={<App />}>
        <Route path="" element={<MyLayout menu={RouteConfig} />}>
          <Route path="home" element={<Home />} />
          <Route path="user">
            <Route path="userIndex" element={<UserIndex />} />
            <Route path="userManage" element={<UserManage />} />
            <Route path="userManage/userDetail" element={<UserDetail />} />
          </Route>
        </Route>

        <Route path="/login" element={<Login />} />
      </Route>

    </Routes>
  </BrowserRouter>
}

ReactDOM.render(
  <React.StrictMode>
    <MyRoutes />
  </React.StrictMode>,
  document.getElementById('root')
)
